<template>
  <!-- 订单详情 -->
  <div>
    <header class="orderHeaderBox">
      <van-row>
        <van-col class="orderMarginTop" span="24">
          <van-row class="textBoxOrder">
            <van-col @click="orderBack">
              <van-icon name="arrow-left" size="40" />
            </van-col>
            <van-col> 订单详情 </van-col>
          </van-row>
        </van-col>
      </van-row>
    </header>
      <!-- 占位 -->
    <section style="margin-top: 55px"></section>
    <!-- 订单状态信息 -->
    <section>
      <van-row class="oderboder">
        <van-col
          offset="1"
          span="6"
          class="oderboderRight orderPaddingSmall orderFintSizeMax"
        >
          订单状态：
        </van-col>
        <van-col
          offset="1"
          class="orderPaddingSmall orderFintColorG orderFintSizeMax"
        >
          待卖家确认
        </van-col>
      </van-row>
      <van-row class="oderboderBottom">
        <van-col
          offset="1"
          span="6"
          class="oderboderRight orderPaddingSmall orderFintSizeMaxS"
        >
          订单状态：
        </van-col>
        <van-col offset="1" class="orderPaddingSmall orderFintSizeMaxS">
          待卖家确认
        </van-col>
      </van-row>
    </section>
    <section>
      <van-row>
        <van-col offset="1" class="orderPaddingMax orderFintSizeMax">
          商品信息
        </van-col>
      </van-row>
      <!-- 商铺信息 -->
      <section>
        <!--商铺信息 -->
        <van-row>
          <van-col
            span="24"
            class="orderBorderStyleTop orderPaddingSmall orderFintSizeSmall"
          >
            <van-row>
              <van-col offset="1" span="23">
                <van-icon name="label-o" />
                XXX商铺
              </van-col>
            </van-row>
          </van-col>
        </van-row>
        <!--  商品信息-->
        <van-row class="orderBorderStyleTop orderPaddingTopSmall">
          <van-col offset="1" span="5">
            <van-image
              width="80"
              height="80"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
          </van-col>
          <van-col offset="1" span="17" class="orderPaddingMax">
            <van-row>
              <van-col class=""> 黑美人西瓜鲜美多汁2个起卖 </van-col>
            </van-row>
            <van-row>
              <van-col class="orderFintSizeSmallS orderPaddingSmallS">
                独立包装（1个装）X1
              </van-col>
            </van-row>
            <van-row>
              <van-col
                class="orderFintSizeMax orderFintColorRed orderPaddingSmallS"
              >
                ￥38.8
              </van-col>
            </van-row>
          </van-col>
        </van-row>

        <!--  商品信息-->
        <van-row class="orderBorderStyleTop orderPaddingTopSmall">
          <van-col offset="1" span="5">
            <van-image
              width="80"
              height="80"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
            />
          </van-col>
          <van-col offset="1" span="17" class="orderPaddingMax">
            <van-row>
              <van-col class=""> 黑美人西瓜鲜美多汁2个起卖 </van-col>
            </van-row>
            <van-row>
              <van-col class="orderFintSizeSmallS orderPaddingSmallS">
                独立包装（1个装）X1
              </van-col>
            </van-row>
            <van-row>
              <van-col
                class="orderFintSizeMax orderFintColorRed orderPaddingSmallS"
              >
                ￥38.8
              </van-col>
            </van-row>
          </van-col>
        </van-row>
      </section>
      <!-- 金额信息 -->
      <section>
        <van-row class="">
          <van-col offset="1" class="orderPaddingSmall"> 总金额： </van-col>
          <van-col
            offset="2"
            class="orderPaddingSmall orderFintColorRed orderFintSizeMax"
          >
            ￥116.35
          </van-col>
        </van-row>
        <van-row class="">
          <van-col offset="1" class="orderPaddingSmall"> 优惠金额： </van-col>
          <van-col
            offset="1"
            class="orderPaddingSmall orderFintColorRed orderFintSizeMax"
          >
            ￥116.35
          </van-col>
        </van-row>
        <van-row class="">
          <van-col offset="1" class="orderPaddingSmall"> 运费： </van-col>
          <van-col
            offset="3"
            class="orderPaddingSmall orderFintColorRed orderFintSizeMax"
          >
            ￥116.35
          </van-col>
        </van-row>
        <van-row class="">
          <van-col offset="1" class="orderPaddingSmall orderFintSizeSmall">
            实付金额：
          </van-col>
          <van-col
            offset="1"
            class="orderPaddingSmall orderFintColorRed orderFintSizeMax"
          >
            ￥116.35
          </van-col>
        </van-row>
      </section>
      <!-- 订单信息 -->
      <section>
        <van-row>
          <van-col offset="1" class="orderPaddingMax orderFintSizeMax">
            订单信息
          </van-col>
        </van-row>
        <!-- ************************** -->
        <van-row class="oderboderBottom">
          <van-col offset="1" span="5" class="oderboderRight orderPaddingSmall">
            配送方式:
          </van-col>
          <van-col offset="1" class="orderPaddingSmall"> 平台统一配送 </van-col>
        </van-row>
        <van-row class="oderboderBottom">
          <van-col offset="1" span="5" class="oderboderRight orderPaddingSmall">
            支付方式:
          </van-col>
          <van-col offset="1" class="orderPaddingSmall"> 微信支付 </van-col>
        </van-row>
        <van-row class="oderboderBottom">
          <van-col offset="1" span="5" class="oderboderRight orderPaddingSmall">
            下单时间:
          </van-col>
          <van-col offset="1" class="orderPaddingSmall">
            2022-12-12 15:00:00
          </van-col>
        </van-row>
        <van-row class="oderboderBottom">
          <van-col offset="1" span="5" class="oderboderRight orderPaddingSmall">
            备注信息:
          </van-col>
          <van-col offset="1" class="orderPaddingSmall"> 无 </van-col>
        </van-row>
      </section>
      <!-- 发票信息 -->
      <section>
        <van-row>
          <van-col offset="1" class="orderPaddingMax orderFintSizeMax">
            发票信息
          </van-col>
        </van-row>
        <!-- ************************** -->
        <van-row class="oderboderBottom">
          <van-col offset="1" span="5" class="oderboderRight orderPaddingSmall">
            发票类型:
          </van-col>
          <van-col offset="1" class="orderPaddingSmall"> 普通发票 </van-col>
        </van-row>
        <van-row class="oderboderBottom">
          <van-col offset="1" span="5" class="oderboderRight orderPaddingSmall">
            发票抬头:
          </van-col>
          <van-col offset="1" class="orderPaddingSmall"> 个人 </van-col>
        </van-row>
        <van-row class="oderboderBottom">
          <van-col offset="1" span="5" class="oderboderRight orderPaddingSmall">
            发票内容:
          </van-col>
          <van-col offset="1" class="orderPaddingSmall"> 商品明细 </van-col>
        </van-row>
      </section>
      <van-row class="orderPaddingMax">
        <van-col offset="17">
          <van-button type="default" @click="salesReturnNext">申请退货</van-button>
        </van-col>
      </van-row>
    </section>
    <footer class="orderFooterBox">
      <van-row class="orderPaddingMax">
        <van-col offset="17">
          <van-button type="default" class="againBuy" @click="againBuyNext">再次购买</van-button>
        </van-col>
      </van-row>
    </footer>
    <!-- 占位 -->
    <section style="margin-bottom:80px"></section>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    orderBack() {
      this.$router.back();
    },
    againBuyNext(){
      this.$router.push('/cart');
    },
    salesReturnNext(){
      this.$router.push('/salesReturn');
    }
  },
};
</script>

<style>
.orderHeaderBox {
  position: fixed;
  top: 0;
  width: 100%;
  height: 35px;
  background-color: #4bd863;
  z-index: 9999;
  padding: 10px 0;
}
.orderMarginTop {
  /* margin-top: 35px; */
}
.textBoxOrder {
  height: 50px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.oderboder {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.oderboderTop {
  border-top: 1px solid #ccc;
}
.oderboderBottom {
  border-bottom: 1px solid #ccc;
}
.oderboderRight {
  border-right: 1px solid #ccc;
  padding-left: 5px;
}
.orderPaddingSmall {
  padding: 10px 0;
}
.orderPaddingMax {
  padding: 15px 0;
}
.orderPaddingTopSmall {
  padding-top: 10px;
}
.orderPaddingSmallS {
  padding: 2px 0;
}
.orderPaddingMax {
  padding: 15px 0;
}
.orderFintSizeMax {
  font-size: 18px;
  font-weight: 700;
}
.orderFintSizeMaxS {
  font-size: 18px;
}
.orderFintSizeSmall {
  font-size: 16px;
  font-weight: 700;
}
.orderFintSizeSmallS {
  font-size: 14px;
  color: rgb(88, 83, 83);
}
.orderFintColorG {
  color: #4bd863;
}
.orderFintColorBlue {
  color: #3399cc;
}
.orderFintColorRed {
  color: red;
}
.orderBorderStyleTop {
  border-top: 1px solid #ccc;
}
.orderFooterBox{
  height: 80px;
  background-color: rgb(226, 226, 219);
  position:fixed;
  width: 100%;
  bottom: 0;
}
.againBuy{
  width: 100px;
  color: #4bd863;
  border: 1px solid  #4bd863;
  border-radius: 5px;
}
</style>